<template>
	<view class="inviteFriends">
		<n-loading></n-loading>
		<view class="imgStation">
			<image :src="posterPath" mode="" v-if="posterPath!=''"></image>
		</view>
		<view class="minePainter">
			<lime-painter :board="iFriends" v-if="isGenerate==1" :isRenderImage="true" @success="posterPath = $event" @fail=""></lime-painter>
		</view>
		
		<view class="shareBtnBox">
			<view class="shareBtn" @tap="shareGoOn">立即分享</view>
		</view>
		
		<!-- 分享 -->
		<u-popup v-model="shareWayShow" mode="bottom" border-radius="16">
			<view class="shareWaysBox">
				<view class="shareWays">
					<view class="shareWaysEach">
						<button class="shareFriendsBtn" open-type="share" :plain="true" @click="cancelShare">
							<view class="shareWaysEachIcon">
								<u-icon name="weixin-fill" color="#2DC100" size="48"></u-icon>
							</view>
							<view class="tit">微信好友分享</view>
						</button>
					</view>
					<view class="shareWaysEach" @tap="savePoster">
						<view class="shareWaysEachIcon">
							<u-icon name="download" color="#333333" size="48"></u-icon>
						</view>
						<view class="tit">保存图片</view>
					</view>
				</view>
				<!-- 取消 -->
				<view class="cancel" @tap="cancelShare">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				shareWayShow:false,
				invitationCode:'',
				isGenerate:0,
				iFriends: {
					width: "676rpx",
					height: "980rpx",
					background: "",
					views: [
						{
							type: "image",
							url: "https://lovebirdopen.com/static/img/poster/inviteFriends.png",
							css: {
								width: "676rpx",
								height: "980rpx",
								top: "0rpx",
								left: "0rpx",
								mode: "center",
								radius: '16rpx'
							}
						},
						{
							type: 'view',
							css: {
								width: '128rpx',
								height: '128rpx',
								left: '275rpx',
								top: '106rpx',
								background: '#ffffff',
								radius: '50%',
								border: '18rpx solid #F2E0BD'
							}
						},
						{//2用户头像
							type: "image",
							url: "",
							css: {
								width: "115rpx",
								height: "115rpx",
								top: "112.5rpx",
								left: "282.5rpx",
								mode: "center",
								radius: '50%'
							}
						},
						{//3用户名称
							type: 'text',
							text: '',
							css: {
								width: '676rpx',
								maxLines: 1,
								color: '#333',
								left: '0rpx',
								top: '248rpx',
								fontSize: '28rpx',
								lineHeight: '44rpx',
								textAlign: 'center'
							}
						},
						{//4tips1111
							type: 'text',
							text: '加入御贡优品 ，每笔佣金高达',
							css: {
								width: '374rpx',
								maxLines: 1,
								color: '#765731',
								left: '172rpx',
								top: '318rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
							}
						},
						{//5tips22222
							type: 'text',
							text: '10%',
							css: {
								width: '54rpx',
								maxLines: 1,
								color: '#FF8A1E',
								left: '492rpx',
								top: '320rpx',
								fontSize: '24rpx',
								lineHeight: '40rpx'
							}
						},
						{
							type: 'view',
							css: {
								width: '160rpx',
								height: '160rpx',
								top: '404rpx',
								left: '383rpx',
								background: 'rgba(255,255,255,.5)',
								radius: '50%'
							}
						},
						{//7小程序码
							type: "image",
							url: "",
							css: {
								width: "144rpx",
								height: "144rpx",
								top: "412rpx",
								left: "391rpx",
								mode: "center",
								radius: '50%'
							}
						}
					]
				},
				posterPath: '',
				timer: null ,// 定时器
			}
		},
		onLoad: function (option) {
			this.getLogonUser()
		},
		methods:{
			getLogonUser() {
				this.apiget('/fun/member/view', {}).then(res => {
					if (res.data.status == 200) {
						this.iFriends.views[2].url = res.data.data.avatar;
						this.iFriends.views[3].text = res.data.data.nickname;
						this.invitationCode = res.data.data.invitation_code;
						// 获取小程序码
						this.gerWxCode();
					}
				})
			},
			gerWxCode(){
				var _this = this;
				this.apipost('/wxxcx/get-wx-code', {page:'pages/index',scene:'ref='+this.invitationCode+'&other=1',width:280,is_hyaline:1}).then(res => {
					if (res.data.status == 200) {
						this.iFriends.views[7].url = res.data.data;
						this.showLoadGo(true);
						// this.showLoadGo(true);
						// this.timer = setInterval(() => {
						// 	console.log(111)
						// 	console.log(this.posterPath)
						// 	if(this.posterPath!=''){
						// 		// 清除定时器
						// 		clearInterval(this.timer);
						// 		this.timer = null;
						// 		this.showLoadGo(false);
						// 		this.isGenerate = 1;
						// 	}
						// }, 1000);
						// if(this.posterPath){
						// 	this.showLoadGo(false);
							this.isGenerate = 1;
						// }
					}
				})
			},
			shareGoOn(){
				this.shareWayShow = true;
			},
			cancelShare(){
				this.shareWayShow = false;
			},
			// 生成海报
			savePoster() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.posterPath,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000,
							success: function() {
								_this.shareWayShow = false
							}
						})
					}
				})
			}
		},
		onShareAppMessage(res) {
			var _this = this;
			return {
				title: '',
				path: 'pages/index?ref='+_this.invitationCode+'&other=1',
				imageUrl: this.posterPath
			}
			if (res.from === 'button') { // 来自页面内分享按钮
				uni.showToast({
					title: '已发送',
					icon: 'success',
					duration: 2000,
					success: function() {
						_this.shareWayShow = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.inviteFriends{
		min-height: 100%;
		padding-top: 32rpx;
		background: linear-gradient(180deg, #2B251A 0%, rgba(53, 39, 13, 0.9) 100%);
	}
	
	
	.minePainter {
		position: fixed;
		left: -800rpx;
		width: 676rpx;
		height: 980rpx;
	}
	
	.imgStation{
		width: 676rpx;
		height: 980rpx;
		margin: 0 auto;
		
		image{
			width: 676rpx;
			height: 980rpx;
		}
	}
	
	.shareBtnBox{
		margin-top: 60rpx;
		padding: 0 32rpx;
		
		.shareBtn{
			height: 80rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
			color: #F2E0BD;
			background: #7B5D34;
			border-radius: 52rpx;
		}
	}
	
	
	//分享方式
	.shareWaysBox {
		padding: 64rpx 32rpx;
	
		.shareWays {
			display: flex;
			padding-bottom: 60rpx;
			text-align: center;
	
			.shareWaysEach {
				flex: 1;
	
				.shareFriendsBtn {
					border: none;
				}
	
				.shareWaysEachIcon {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 112rpx;
					width: 112rpx;
					margin: 0 auto;
					background: #F7F7F7;
					border-radius: 8rpx;
				}
	
				.tit {
					margin-top: 16rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999999;
				}
			}
		}
	
		.cancel {
			height: 96rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			text-align: center;
			color: #333;
			background: #F7F7F7;
			border-radius: 48px;
		}
	}
</style>
